import {ref,onMounted,onUnmounted, Ref} from 'vue'

const useClickOutside = (elementRef:Ref<null|HTMLElement>) => {
  const isClickOutside = ref(false)
  const handler = (e:MouseEvent)=>{
    if(elementRef.value){
      /*
        JS 一个非常好用的方法 Dom1.contains(Dom2) 表示的是Dom1是否有包含Dom2 
          也就是表示Dom2是否是DOM1的子节点 根据这个方法我们就可以很放的做 当我们点击一个Dom元素以外的一系列操作
      */ 
      if(!elementRef.value.contains(e.target as HTMLElement)){
        isClickOutside.value = true
      }else{
        isClickOutside.value = false
      }
    }
  }
  onMounted(()=>{
    document.addEventListener('click',handler)
  })
  onUnmounted(()=>{
    document.removeEventListener('click',handler)
  })
  return isClickOutside
}

export default useClickOutside